<template>
    <div class="topic-page">
        <div class="topic-list">
            <p class="topic-title">
                - 热门话题
            </p>
            <template v-for="(item,index) in list" :key="index">

                <div v-if="index == list.length / 2" class="banner">
                    <img src="@/assets/720@2x.webp" alt="">
                </div>

                <div class="topic-item">
                    <div class="topic-item-left">
                        <div class="topic-item-left-tag">
                            回响
                        </div>
                        <div class="topic-item-left-hot">
                            {{ item.topic_count }}
                        </div>
                    </div>
                    <div class="topic-item-center">
                        <p class="topic-item-center-title">话题：{{ item.tag_name }}</p>
                        <p class="topic-item-center-content">帖子：{{ item.topic_title }}</p>
                    </div>
                    <div class="topic-item-right">
                        <p class="topic-item-right-name">{{ item.nickname }}</p>
                        <p class="topic-item-right-time">{{ item.topic_time }}</p>
                    </div>
                </div>
                <nut-divider style="color: #2d2d2d ;margin: 10px 0;"></nut-divider>
            </template>
        </div>



<!--        <div class="topic-list">-->
<!--            <template v-for="(item,index) in 5" :key="index">-->
<!--                <div class="topic-item">-->
<!--                    <div class="topic-item-left">-->
<!--                        <div class="topic-item-left-tag">-->
<!--                            回响-->
<!--                        </div>-->
<!--                        <div class="topic-item-left-hot num">-->
<!--                            666-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="topic-item-center">-->
<!--                        <p class="topic-item-center-title">话题：SOUL DESCENT</p>-->
<!--                        <p class="topic-item-center-content">帖子：如何快速解锁全色色动画片段</p>-->
<!--                    </div>-->
<!--                    <div class="topic-item-right">-->
<!--                        <p class="topic-item-right-name">黄油小郎君</p>-->
<!--                        <p class="topic-item-right-time">2025/05/05</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <nut-divider style="color: #2d2d2d ;margin: 10px 0;"></nut-divider>-->
<!--            </template>-->
<!--        </div>-->

        <div style="display: flex;justify-content: center;height: 40px;margin-top: 20px;">
            <nut-pagination v-model="page" :total-items="125" :show-page-size="3" force-ellipses></nut-pagination>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {axiosService} from "@http";
export interface HotTopicInterface {
    total_items: number
    limit: number
    first: number
    previous: number
    current: number
    next: number
    last: number
    items: HotTopicItemInterface[]
}

export interface HotTopicItemInterface {
    tag_id: number
    tag_name: string
    topic_count: number
    topic_title: string
    nickname: string
    topic_time: string
    user_id: number
}

const page = ref(1)

const list = ref<HotTopicItemInterface[]>([])

const getList = async () => {
    const data = {
        page: page.value //分也
    }
    const res = await axiosService.post<HotTopicInterface>('/api/Topic/hotTopic', data)
    if (res.code === 200 && res.data){
        list.value = res.data.items
    }
}
getList()



</script>

<style scoped lang="scss">
.topic-page{
    background-color: #3f3f3f;
    color: #fff;
}
.banner{
    padding:0 15px;
    img{
        width: 100%;
    }
}
.topic-list{
    padding: 15px;
    font-size: 12px;
    padding-bottom: 0;
    .topic-title{
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .topic-item{
        display: flex;
        .topic-item-left{
            width: 40px;
            flex-grow: 0;
            display: flex;
            justify-content: center;
            font-weight: bold;
            flex-direction: column;
            align-items: center;
            .topic-item-left-tag{
                line-height: 17px;
            }
            .topic-item-left-hot{
                color: #ff7200;
                line-height: 17px;
                &.num{
                    color: #e074e9;
                }
            }
        }
        .topic-item-center{
            flex-grow: 1;
            .topic-item-center-title{
                line-height: 25px;
            }
            .topic-item-center-content{
                font-weight: bold;
                line-height: 20px;
            }
        }
        .topic-item-right{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            p{
                line-height: 15px;
            }
            width: 50px;
            flex-grow: 0;
            font-size: 8px;
        }

    }
}

</style>
